<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <h:head>
        <link rel="stylesheet" href="/FinancasPessoais/Bootstrap/css/bootstrap.css"/>
        <link rel="stylesheet" href="/FinancasPessoais/Bootstrap/css/menu.css"/>
        <link rel="stylesheet" href="/FinancasPessoais/Bootstrap/css/tabelas.css"/>
        <link rel="stylesheet" href="/FinancasPessoais/Bootstrap/css/jquery-ui.min.css"/>
        <link rel="stylesheet" href="/FinancasPessoais/Bootstrap/css/jquery-ui.theme.min.css"/>
        <script type="text/javascript" src="/FinancasPessoais/Bootstrap/js/jquery.min.js"></script>
        <script type="text/javascript" src="/FinancasPessoais/Bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/FinancasPessoais/Bootstrap/js/jquery-ui.min.js"></script>
        <script src="/FinancasPessoais/Bootstrap/js/jquery.maskedinput.js" type="text/javascript" />
        <script src="/FinancasPessoais/Bootstrap/js/jquery.maskMoney.js" type="text/javascript" />
       
        <script type="text/javascript">
            $(document).ready(function() {
                $(".dinheiro").maskMoney({showSymbol:true, symbol:"R$", decimal:".", thousands:"."});
                });
        </script>
        <script type="text/javascript">
                $(document).ready(function() {
                    $(".inteiro").mask("99/99/9999");
                });
        </script>
        
        <script>
            $(function () {
            $("#from").datepicker({
            onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
            }
            });
            $("#to").datepicker({
            onClose: function (selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
            }
            });
            });
        </script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Task', 'Hours per Day'],
              ['Despesas',     11],
              ['Receitas',      2],
            ]);
            var options = {
              title: 'Minhas Receitas e Despesas'
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));

            chart.draw(data, options);
         }
        </script>
    </h:head>

        <nav class="menu navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>                        
                        </button>
                            <a class="navbar-brand" href="inicio.xhtml"><span class="glyphicon glyphicon-globe"></span>  My Finances</a>
                    </div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav">
                            <li><a href="inicio.xhtml"><span class="glyphicon glyphicon-home"></span>  Inicio</a></li>
                            <li><a href="contas.xhtml"><span class="glyphicon glyphicon-piggy-bank"></span>  Contas</a></li>
                            <li><a href="movimentacoes.xhtml"><span class="glyphicon glyphicon-resize-full"></span>  Movimentações</a></li>
                            <!--<li><a href="relatorios.xhtml"><span class="glyphicon glyphicon-list-alt"></span>  Relatorios</a></li>-->
                            <li><a href="categoria.xhtml"><span class="glyphicon glyphicon-menu-hamburger"></span>  Categorias</a></li>
                            <li><a href="configuracoes.xhtml"><span class="glyphicon glyphicon-wrench"></span>  Configurações</a></li>
                            <li><a href="sobre.xhtml"><span class="glyphicon glyphicon-thumbs-up"></span>  Quem Somos</a></li>
                        </ul>
                        <h:form>
                       <ul class="nav navbar-nav navbar-right">
                           <li><h:outputLabel value="#{pessoaMB.pessoa.email}"><span class="glyphicon glyphicon-log-user"></span></h:outputLabel></li>
                           <li><h:commandLink action="#{pessoaMB.logout()}"><span class="glyphicon glyphicon-log-in"></span> logoff</h:commandLink></li>
                        </ul>   
                        </h:form>
                    </div>
            </div>
        </nav>      
</html>
